<template>
	<div class="contact-icon contact"  id="contactImage"  @touchmove.stop="_move" @touchstart="_moveStart" @touchend="_moveEnd" :style="{top: buttonTop+'px',left:buttonLeft+'px'}">
		<image src="../../static/contact.png" id="contactImage" mode="widthFix"></image>
		<button class="" open-type="contact">客服</button>
	</div>
</template>

<script setup>
import { onMounted, ref} from "vue";


	//按钮位置参数
	let buttonTop = ref(0);
	let buttonLeft = ref(0);
	let windowHeight = ref(0);
	let windowWidth = ref(0);
	let startPoint = ref({})

	function _moveStart(e) {
	  startPoint.value = e.touches[0]
	}
 
	function _move (e) {
		 var endPoint = e.touches[e.touches.length - 1]//获取拖动结束点
		 //计算在X轴上拖动的距离和在Y轴上拖动的距离
		 var translateX = endPoint.clientX - startPoint.value.clientX
		 var translateY = endPoint.clientY - startPoint.value.clientY
		 startPoint.value = endPoint//重置开始位置
		 var buttonTopNum = buttonTop.value + translateY
		 var buttonLeftNum = buttonLeft.value + translateX
		 //判断是移动否超出屏幕
		 if (buttonLeftNum + 50 >= windowWidth.value){
		  buttonLeftNum = windowWidth.value - 50;
		 }
		 if (buttonLeftNum<=0){
		  buttonLeftNum=0;
		 }
		 
		 if (buttonTopNum<= 60){
		  buttonTopNum = 60
		 }
		 if (buttonTopNum + 50 >= windowHeight.value){
		  buttonTopNum = windowHeight.value-50;
		 }
		 
		 buttonTop.value = buttonTopNum;
		 buttonLeft.value = buttonLeftNum
	 }
 
 function _moveEnd(e) {
	 if(buttonLeft.value > (windowWidth.value-50)/2){ // 停止的时候靠右边
		buttonLeft.value =  windowWidth.value - 50
	 }else {
		 buttonLeft.value = 0
	 }
 }

onMounted(()=>{
	wx.getSystemInfo({
	  success: function (res) {
	  // 屏幕宽度、高度
	  windowHeight.value = res.screenHeight;
	  windowWidth.value = res.windowWidth;
	  
	  buttonTop.value = res.screenHeight*0.80;
	  buttonLeft.value = res.windowWidth - 50;
	  }
	})
})	
	
</script>

<style lang="scss">
.contact {
  position: fixed;
  width: 84rpx;
  height: 84rpx;
  bottom: 228rpx;
  right: 46rpx;
  z-index: 9999;
  image {
	width: 84rpx;
  }
  button {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
  }
}
</style>